<template>
  <div class="byd_location">
    <div class="container">
      <div class="byd_location_main">
        <div class="byd_location_main_left" id="byd_location_main_left">
          <h1>预约试驾</h1>
          <p>
            欢迎您在线在线预约试驾,请准确填写以下信息,我们将为您提供更好的驾乘体验!
          </p>
          <el-form :rules="rules" ref="form" :model="form" label-width="80px">
            <el-form-item :required="false" label="车型选择: ">
              <el-cascader
                v-model="form.cid"
                :options="options1"
                @change="handleChange1"
              ></el-cascader>
            </el-form-item>

            <el-form-item :required="false" label="省份选择:">
              <div class="block">
                <el-cascader
                  v-model="form.customer_add"
                  :options="options2"
                  @change="handleChange2"
                ></el-cascader>
              </div>
            </el-form-item>
            <el-form-item class="ipt_for" :required="false" label="门店选择:">
              <el-input
                type="text"
                placeholder="请在地图搜索4s门店"
                v-model="form.store_add"
                class="ipt_for1"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item :required="false" label="试驾时间:">
              <el-date-picker
                v-model="form.time"
                type="datetime"
                placeholder="选择日期时间"
                :picker-options="expireTimeOption"
                @blur="getFormtime()"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item class="ipt_for" :required="false" label="预约姓名:">
              <el-input
                placeholder="请输入预约人姓名"
                type="text"
                v-model="form.name"
                class="ipt_for1"
              ></el-input>
            </el-form-item>

            <el-form-item
              class="ipt_for"
              :required="false"
              prop="tel"
              label="电话号码:"
            >
              <el-input
                placeholder="请输入预约人电话"
                maxlength="11"
                v-model="form.tel"
                class="ipt_for1"
              ></el-input>
            </el-form-item>

            <el-form-item style="margin-left: 30px">
              <el-button
                style="margin-top: 20px;width:154px"
                class="subbtn"
                type="primary"
                @click="noShake(10);onSubmit(form)"
                :disabled="disabled"
                >立即预约{{time}}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="byd_location_main_right">
          <map-map ref="map" @updateLocation="updateLocation" @input="item" />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
// 引入地图
// 引入post传参组件
import qs from "qs";
import MapMap from "../components/MapMap.vue";

export default {
  // 地图 **********************
  components: { MapMap },
  name: "",
  props: {},

  data() {
    // 对号码验证
    var validateTel = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };

    return {
      disabled:false,
      time:'',
      form: {
        
        cid: "",
        phone: "",
        customer_add: "",
        store_add: "",
        time: "",
        name: "",
        tel: "",
        order_status: "0",
      },

      rules: {
        tel: [{ validator: validateTel, trigger: "blur" }],
      },

      //  车型选择
      cid1: [],
      options1: [
        {
          value: "海豹",
          label: "海豹",
          children: [
            {
              value: "1",
              label: "550km标准续航后驱版精英型",
            },
            {
              value: "2",
              label: "550km标准续航后驱版尊贵型",
            },
            {
              value: "3",
              label: "700km长续航后驱版",
            },
            {
              value: "4",
              label: "650km四驱性能版",
            },
          ],
        },
        {
          value: "汉dmi",
          label: "汉dmi",
          children: [
            {
              value: "5",
              label: "121KM尊贵型",
            },
            {
              value: "6",
              label: "121KM尊容型",
            },
            {
              value: "7",
              label: "121KM尊享型",
            },
            {
              value: "8",
              label: "242KM旗舰型",
            },
          ],
        },
        {
          value: "创世",
          label: "创世",
          children: [
            {
              value: "9",
              label: "715KM尊容型",
            },
            {
              value: "10",
              label: "715KM旗舰型",
            },
            {
              value: "11",
              label: "610KM四驱尊享型",
            },
          ],
        },
        {
          value: "创世",
          label: "唐EV",
          children: [
            {
              value: "12",
              label: "600KM尊享型",
            },
            {
              value: "13",
              label: "730KM尊享型",
            },
            {
              value: "14",
              label: "635KM四驱尊享型",
            },
          ],
        },
      ],

      // 省份选择
      customer_add2: [],
      options2: [
        {
          value: "山西省",
          label: "山西省",
        },
        {
          value: "辽宁省",
          label: "辽宁省",
        },
        {
          value: "吉林省",
          label: "吉林省",
        },
        {
          value: "黑龙江省",
          label: "黑龙江省",
        },
        {
          value: "江苏省",
          label: "江苏省",
        },
        {
          value: "浙江省",
          label: "浙江省",
        },
        {
          value: "安徽省",
          label: "安徽省",
        },
        {
          value: "福建省",
          label: "福建省",
        },
        {
          value: "江西省",
          label: "江西省",
        },
        {
          value: "山东省",
          label: "山东省",
        },
        {
          value: "河南省",
          label: "河南省",
        },
        {
          value: "湖北省",
          label: "湖北省",
        },
        {
          value: "湖南省",
          label: "湖南省",
        },
        {
          value: "广东省",
          label: "广东省",
        },
        {
          value: "海南省",
          label: "海南省",
        },
        {
          value: "四川省",
          label: "四川省",
        },
        {
          value: "贵州省",
          label: "贵州省",
        },
        {
          value: "云南省",
          label: "云南省",
        },
        {
          value: "陕西省",
          label: "陕西省",
        },
        {
          value: "甘肃省",
          label: "甘肃省",
        },
        {
          value: "青海省",
          label: "青海省",
        },
        {
          value: "台湾省",
          label: "台湾省",
        },
        {
          value: "内蒙古自治区",
          label: "内蒙古自治区",
        },
        {
          value: "广西壮族自治区",
          label: "广西壮族自治区",
        },
        {
          value: "西藏自治区",
          label: "西藏自治区",
        },
        {
          value: "宁夏回族自治区",
          label: "宁夏回族自治区",
        },
        {
          value: "新疆维吾尔自治区",
          label: "新疆维吾尔自治区",
        },
        {
          value: "北京市",
          label: "北京市",
        },
        {
          value: "天津市",
          label: "天津市",
        },
        {
          value: "上海市",
          label: "上海市",
        },
        {
          value: "重庆市",
          label: "重庆市",
        },
        {
          value: "香港特别行政区",
          label: "香港特别行政区",
        },
        {
          value: "澳门特别行政区",
          label: "澳门特别行政区",
        },
      ],
      //设置失效日期今天之前的日期不可选
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
    };
  },

  methods: {
    // 表单日期
    getFormtime() {
      this.form.time = this.form.time.getTime();
    },
    // 提交预约试驾表单
    onSubmit() {
      if (!sessionStorage.getItem("phone")) {
        this.$message({
          message: "请先登录",
          type: "warning",
          center: true,
          duration:10000,
          // offset: 400,
        });
        return;
      } else {
        this.axios
          .post("/order", qs.stringify(this.form))
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "恭喜您,预约成功!",
                type: "success",
                center: true,
              });
              this.$router.push('/centre/order')
            } else if (res.data.code == 201) {
              this.$message({
                message: "填写完整信息,即可预约成功!",
                type: "error",
                center: true,
                duration:10000,
              });
            }
          })
          .catch((err) => {
            return err;
          });
      }
    },
    handleChange1(cid1) {
      this.form.cid = cid1[1];
    },
    handleChange2(customer_add2) {
      this.form.customer_add = customer_add2[0];
    },
    handleChange3(store_add3) {
      let obj = `${store_add3[0]}${store_add3[1]}`;
      this.form.store_add = obj;
    },

    // 地图 *****************************
    updateLocation(Addr) {
      // console.log("位置信息：", Addr);
    },
    item(data) {
      this.form.store_add = data;
    },
  },

  mounted() {
    this.form.phone = sessionStorage.getItem("phone");
  },
};
</script>


<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

.byd_location_main {
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.byd_location .byd_location_main_left {
  width: 32%;
  height: 600px;
  border-radius: 5px;
  box-shadow: 0 0 5px gray;
  padding: 20px;
  color: #545c64;
  text-align: left;
  box-sizing: border-box;
}

.byd_location .subbtn {
  background-color: #00b1a9 !important;
  border-color: transparent !important;
  box-shadow: 0 0 5px #00b1a9;
}

.byd_location .subbtn:hover {
  background-color: #0ba49c !important;
}

.byd_location .byd_location_main_left p {
  margin: 15px 0;
}

.byd_location .byd_location_main_right {
  height: 600px;
  width: 65%;
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
}
</style>
<style scoped>
.el-input__inner {
  margin-right: 40px;
}

.el-input--prefix .el-input__inner {
  width: 117% !important;
}

.el-button {
  padding: 12px 40px !important;
}

.el-form-item__label {
  width: 82px !important;
}

.el-form-item__content {
  margin-left: 60px !important;
}

.ipt_for1 {
  width: 83%;
}
</style>
